<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - beforeClick / onClick</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="./css/demo.css" type="text/css">
    <link rel="stylesheet" href="./css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style type="text/css">
	.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	</style>
    <script type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="./js/jquery.ztree.core.js"></script>
	  <script type="text/javascript" src="./js/jquery.ztree.excheck.js"></script>
	  <script type="text/javascript" src="./js/jquery.ztree.exedit.js"></script>
	<SCRIPT type="text/javascript">
		<!--
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			edit: {
				enable: true,
				showRemoveBtn : true,
				showRenameBtn : true,
				removeTitle : 'remove',
				renameTitle : 'rename'
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick,
				onClick: onClick,
				onRename: zTreeOnRename,
				onRemove: zTreeOnRemove
			}
		};

		var zNodes =[
    ];
    
    var host = "http://"+window.location.host;

		var log, className = "dark";
		function beforeClick(treeId, treeNode, clickFlag) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeClick ]&nbsp;&nbsp;" + treeNode.name );
			return (treeNode.click != false);
		}
		function onClick(event, treeId, treeNode, clickFlag) {
			/*showLog("[ "+getTime()+" onClick ]&nbsp;&nbsp;clickFlag = " + clickFlag + " (" + (clickFlag===1 ? "普通选中": (clickFlag===0 ? "<b>取消选中</b>" : "<b>追加选中</b>")) + ")");*/
			showLog(JSON.stringify(treeNode));
			if(treeNode.id>0){
				$("#formFrame").attr("src",host+"/category/update/"+treeNode.id);				
			}
		}
		function zTreeOnRename(event, treeId, treeNode, isCancel) {
      		console.log(treeNode.id + ", " + treeNode.name);
      		var cateType = $("#cateType").val();
			if(treeNode.id<0){
				$.ajax({
		            url: host+"/api/admin/categories/post",
		            type: "POST",
		            data: {categoryName:treeNode.name,parentCategoryId:treeNode.pId,categoryRecommend:''},
		            dataType: "json",
		            success: function (data, textStatus, jqXHR) {
		              console.log(data)
		              $("#formFrame").attr("src",host+"/category/update/"+data.data.categoryId);	
		            },
		            error: function (jqXHR, textStatus, errorThrown) {
		              console.log(errorThrown, textStatus);
		            }
		        });	
			}else{
				$.ajax({
		            url: host+"/api/admin/categories/put",
		            type: "PUT",
		            data: {categoryId:treeNode.id,categoryName:treeNode.name},
		            dataType: "json",
		            success: function (data, textStatus, jqXHR) {
		                console.log(data)
		            },
		            error: function (jqXHR, textStatus, errorThrown) {
		                console.log(errorThrown, textStatus);
		            }
		        });		
			}
		}
		function zTreeOnRemove(event, treeId, treeNode) {
			$.ajax({
	          url: host+"/api/admin/categories/delete/"+treeNode.id,
	          type: "DELETE",
	          data: {},
	          dataType: "json",
	          success: function (data, textStatus, jqXHR) {
	              console.log(data)
	          },
	          error: function (jqXHR, textStatus, errorThrown) {
	              console.log(errorThrown, textStatus);
	          }
	      });
		}
		var newCount = -1;
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='add node' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.addNodes(treeNode, {id:(newCount), pId:treeNode.id, name:"new node" + (newCount--)});
				return false;
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};		
		function showLog(str) {
			// if (!log) log = $("#log");
			// log.html("")
			// log.append("<li class='"+className+"'>"+str+"</li>");
			// if(log.children("li").length > 8) {
			// 	log.get(0).removeChild(log.children("li")[0]);
			// }
		}
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds();
			return (h+":"+m+":"+s);
		}
		function setEdit() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.setting.edit.showRemoveBtn = true;
			zTree.setting.edit.showRenameBtn = true;
			zTree.setting.edit.removeTitle = 'remove';
			zTree.setting.edit.renameTitle = 'rename';
    }
    
    function queryCates(){
      var cateType = $("#cateType").val();
      $.ajax({
          url: host+"/api/cateTree",
          type: "GET",
          dataType: "json",
          success: function (data, textStatus, jqXHR) {
              if (data) {
                  zNodes = data
                  $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                  // setEdit();
              }
          },
          error: function (jqXHR, textStatus, errorThrown) {
              console.log("网络故障");
          }
      });
    }

		$(document).ready(function(){
      queryCates();
	  });
		//-->
	</SCRIPT>
</HEAD>

<BODY>
<h1>商品分类</h1>
<div class="content_wrap">
	<div class="zTreeDemoBackground left" >
		<ul id="treeDemo" class="ztree" style="height: 600px"></ul>
	</div>
	<div class="right" >
			<iframe src="" id="formFrame"  style="width: 100%;border: none;height: 650px;"></iframe>
	</div>
</div>
</BODY>
</HTML>